<script>
// 导入处理表格文件的插件
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      // 用来放导入的数据用的
      tableData: [],
      currentPage: 1
    }
  },
  methods: {
    importClick() {
      // console.log(this.$refs.inp)
      // 点击选择文件时,调用input的点击事件,实现选择文件
      this.$refs.inp.click()
    },

    // 选中文件之后的回调函数
    importChange(event) {
      // console.dir(event.target.files[0])
      // 1. 获取到我们选中的文件
      const file = event.target.files[0]
      // 2.创建文件的加载器
      const reader = new FileReader()
      // 3.将文件读取成数据流
      reader.readAsBinaryString(file)
      reader.onload = () => {
        // console.log(reader.result)
        // 4. 通过XLSX将文件的数据流转换成一个js对象
        const box = XLSX.read(reader.result, { type: 'binary' })
        // console.log(box)
        // 5.将 Sheet1 中的数据提取出来
        let res = box.Sheets['Sheet1']
        // console.log(res)
        // 6.将 Sheet1 中的内容转换成json数据
        res = XLSX.utils.sheet_to_json(res)
        // console.log(res)
        // 7.将数据渲染出来
        this.tableData = res
      }
    }
  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData() {
      return this.tableData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  }
}
</script>
<template>
  <div>
    <h5>文件导入</h5>
    <el-button @click="importClick" type="primary" plain>选择文件</el-button>
    <input type="file" ref="inp" hidden @change="importChange">

    <el-table :data="computedTableData">
      <el-table-column label="序号" type="index" :index="(currentPage - 1) * 10 + 1" width="80px" align="center"></el-table-column>
      <el-table-column label="图片" align="center">
        <template #default="scope">
          <div>
            <el-image :src="scope.row.img1"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="category" align="center"></el-table-column>
      <el-table-column label="名称" prop="proname" align="center"></el-table-column>
    </el-table>

    <!-- ------------------做分页显示用的------------------------ -->
    <el-pagination background layout="prev, pager, next" :total="tableData.length" v-model:current-page="currentPage" />
  </div>
</template>
<style lang="scss" scoped>
.el-image {
  width: 100px;
}
</style>